<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>三维模型浏览</title>
<%@ page pageEncoding="utf-8"%>
<script language="javascript" type="text/javascript">

    function createViewer(width, height, placeholder, viewerId) {
        var viewer = null;

        if (navigator.userAgent.indexOf("MSIE") != -1) {
            viewer = document.createElement("object");
            viewer.setAttribute("id", viewerId);
            viewer.setAttribute("classid", "clsid:8d5be3d9-7abb-45a4-9158-750c9446e8e7");
            viewer.setAttribute("width", width.toString() + "px");
            viewer.setAttribute("height", height.toString() + "px");
            placeholder.parentNode.replaceChild(viewer, placeholder);
        } else {
            viewer = document.createElement("embed");
            viewer.setAttribute("id", viewerId);
            viewer.setAttribute("type", "application/jfview-plugin");
            viewer.setAttribute("width", width.toString() + "px");
            viewer.setAttribute("height", height.toString() + "px");
            placeholder.parentNode.replaceChild(viewer, placeholder);
        }

        return viewer;
    }

    var vpCurrentId = 0;
    var gViewer;

    function updateUI() {
        if (gViewer.getActiveAction() == "navigate") {
            document.getElementById("btnNavigate").value = "浏览*";
            document.getElementById("btnSelect").value = "选择";
        } else if (gViewer.getActiveAction() == "select") {
            document.getElementById("btnNavigate").value = "浏览";
            document.getElementById("btnSelect").value = "选择*";
        } else {
            document.getElementById("btnNavigate").value = "浏览";
            document.getElementById("btnSelect").value = "选择";
        }
    }

    function getQueryStringRegExp(name)
    {
        var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i"); 
        if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return "";
    }
    
    function init() {
        gViewer = createViewer(640, 480, document.getElementById("Viewer1"), "viewer1");

        gViewer.addNotificationListener("selection_changed", onSelectionChanged);
        gViewer.addNotificationListener("viewpoint_required", onViewPointRequired);
        gViewer.addNotificationListener("viewpoint_created", onViewPointCreated);
        gViewer.addNotificationListener("viewpoint_deleted", onViewPointDeleted);
        gViewer.addNotificationListener("viewpoint_changed", onViewPointChanged);
        gViewer.addNotificationListener("action_activated", onActionChanged);
        gViewer.addNotificationListener("action_deactivated", onActionChanged);
        gViewer.addNotificationListener("show_element_info", onNotified);
        gViewer.addNotificationListener("enter_gravity_zone", onEnterGravityZone);

        gViewer.execCommand("setOptions", "viewPointRequired:false");

        // 添加构件类型
        gViewer.execCommand("addElementSchema", "#1:$wall:墙:0xc0c0c0:12:0");
        gViewer.execCommand("addElementSchema", "#2:$beam:梁:0x008080:8:3");
        gViewer.execCommand("addElementSchema", "#3:$slab:板:0xd3d3d3:16:1");
        gViewer.execCommand("addElementSchema", "#4:$column:柱:0xd2b48c:4:2");
        gViewer.execCommand("addElementSchema", "#5:$door:门:0x786495ed:8:4");
        gViewer.execCommand("addElementSchema", "#6:$window:窗:0x646495ed:8:4");
        gViewer.execCommand("addElementSchema", "#7:$opening:洞口:0xffffff:20:5");
        gViewer.execCommand("addElementSchema", "#8:$stair:楼梯:0xffffff:20:5");
        gViewer.execCommand("addElementSchema", "#9:$pipe:管道:0xffff00:20:5");
        
        var extension = getQueryStringRegExp("extension");
        if( extension.toUpperCase() == "GMSB" )
        {
            extensionFlag = 0;
        }
        else if( extension.toUpperCase() == "IFC" )
        {
            extensionFlag = 1;
        }
        else if( extension.toUpperCase() == "GCL9" )
        {
            extensionFlag = 2;
        }
        else if( extension.toUpperCase() == "JFX" )
        {
            extensionFlag = 3;
        }
    	gViewer.open("http://localhost:8080/document/file/download?id=" + getQueryStringRegExp("id") , extensionFlag ,false);
        
        updateUI();
    }

    function openFile() {
        gViewer.execCommand("openFile", "");
    }

    function closeFile() {
        gViewer.close();
    }

    function execAction(actionName) {
        //if (gViewer.getActiveAction() != actionName) {
            gViewer.execAction(actionName);
        //}
    }

    function highlightElement() {
        var txtId = document.getElementById("txtElementId");
        var ck = document.getElementById("ckChecked");

        var elementId = txtId.value;
        var args = "#" + elementId.toString() + ":" + (ck.checked ? "true" : "false");
        gViewer.execCommand("setElementHighlighted", args);
    }

    function hideElement() {
        var txtId = document.getElementById("txtElementId");
        var ck = document.getElementById("ckChecked");

        var elementId = txtId.value;
        var args = "#" + elementId.toString() + ":" + (ck.checked ? "false" : "true");
        gViewer.execCommand("setElementVisible", args);
    }

    function applyViewPoint(vid) {
        var vpId = document.getElementById("vp_" + vid);
        var vpCamera = document.getElementById("vpCamera_" + vid);
        var vpRedMarks = document.getElementById("vpRedMarks_" + vid);
        var vpData = vpId.innerHTML + ":" + vpCamera.innerHTML + ":" + vpRedMarks.innerHTML;
        gViewer.execCommand("setViewPoint", vpData);
    }

    function createViewPointUI(vpData) {
        var vpItem = document.createElement("div");

        var arr = vpData.split(":");
        var vid = arr[0].substr(1);

        var imgData = gViewer.execCommand("createScreenshot", "100:75");
        var img = document.createElement("img");
        img.setAttribute("id", "vpImage_" + vid);
        img.src = "data:image/png;base64," + imgData;
        vpItem.appendChild(img);

        var vpId = document.createElement("span");
        vpId.setAttribute("id", "vp_" + vid);
        vpId.setAttribute("style", "background-color:red;");
        vpId.style.backgroundColor = "red";
        vpId.innerHTML = arr[0];
        vpItem.appendChild(vpId);

        var vpCamera = document.createElement("span");
        vpCamera.setAttribute("id", "vpCamera_" + vid);
        vpCamera.setAttribute("style", "background-color:green;");
        vpCamera.style.backgroundColor = "green";
        vpCamera.innerHTML = arr[1];
        vpItem.appendChild(vpCamera);

        var vpRedMarks = document.createElement("span");
        vpRedMarks.setAttribute("id", "vpRedMarks_" + vid);
        vpRedMarks.setAttribute("style", "background-color:blue;");
        vpRedMarks.style.backgroundColor = "blue";
        vpRedMarks.innerHTML = arr[2];
        vpItem.appendChild(vpRedMarks);

        var btn = document.createElement("input");
        btn.setAttribute("type", "button");
        btn.setAttribute("value", "应用");
        btn.onclick = function() {
            applyViewPoint(vid);
        };
        vpItem.appendChild(btn);

        btn = document.createElement("input");
        btn.setAttribute("type", "button");
        btn.setAttribute("value", "删除");
        btn.onclick = function() {
            deleteViewPoint(vid);
        };
        vpItem.appendChild(btn);

        var vpContainer = document.getElementById("vpContainer");
        vpContainer.appendChild(vpItem);
    }

    function createViewPoint() {
        vpCurrentId++;
        gViewer.execCommand("newViewPoint", "#" + vpCurrentId.toString());
    }

    function deleteViewPointUI(vpId) {
        vpId = "vp_" + vpId.substr(1);
        var vp = document.getElementById(vpId);
        if (vp != null) {
            vp.parentNode.parentNode.removeChild(vp.parentNode);
        }
    }

    function deleteViewPoint(vid) {
        gViewer.execCommand("deleteViewPoint", "#" + vid);
    }

    function onSelectionChanged(sender, code, data) {
        //alert("current object: " + data + ", all selections: " + sender.getSelection());
        
        if (data == "*") {
            sender.execCommand("zoomFit", "selection");
        } else {
            var elementId = data;
            
            var txtId = document.getElementById("txtElementId");
            txtId.value = elementId;

            sender.execCommand("zoomFit", "#" + elementId.toString() + ":true");
        }
    }

    function onViewPointRequired(sender, code, data) {
        createViewPoint();
    }

    function onViewPointCreated(sender, code, data) {
        createViewPointUI(data);
    }

    function onViewPointDeleted(sender, code, data) {
        deleteViewPointUI(data);
    }

    function onViewPointChanged(sender, code, data) {
        var arr = data.split(":");
        var vid = arr[0].substr(1);

        var imgData = gViewer.execCommand("createScreenshot", "100:75");
        var img = document.getElementById("vpImage_" + vid);
        img.src = "data:image/png;base64," + imgData;

        if (arr[1] != null && arr[1].length > 0) {
            var vpCamera = document.getElementById("vpCamera_" + vid);
            if (vpCamera != null) {
                vpCamera.innerHTML = arr[1];
            }
        }

        if (arr[2] != null) {
            var vpRedMarks = document.getElementById("vpRedMarks_" + vid);
            if (vpRedMarks != null) {
                vpRedMarks.innerHTML = arr[2];
            }
        }
    }

    function onActionChanged(sender, code, data) {
        updateUI();
    }

    function onNotified(sender, code, data) {
        alert(code + " -> " + data);
    }

    function onEnterGravityZone(sender, code, data) {
		
    }

    function test() {
        
        var txtId = document.getElementById("txtElementId");
        alert(gViewer.execCommand("getActiveViewPointId", ""));
    }

    </script>
</head>
<body style="background-color: whitesmoke; margin: 5px" onload="init();">
	<div id="Viewer1" style="width: 640px; height: 480px">Viewer</div>
	<br />
	<br />
	<input id="btnOpen" type="button" value="打开文件" onclick="openFile();" />
	<input id="btnClose" type="button" value="关闭文件" onclick="closeFile();" />
	<input id="btnNavigate" type="button" value="浏览"
		onclick="execAction('navigate');" />
	<input id="btnSelect" type="button" value="选择"
		onclick="execAction('select');" />
	<input id="btnTest" type="button" value="测试" onclick="test();" />
	<input id="btnHighlight" type="button" value="高亮"
		onclick="highlightElement();" />
	<input id="btnHide" type="button" value="隐藏" onclick="hideElement();" />
	<input id="txtElementId" type="text" value="0" />
	<input id="ckChecked" type="checkbox" checked="checked" />
	<br />
	<br />
	<input id="btnNewViewPoint" type="button" value="用户自定义视点"
		onclick="createViewPoint();" />
	<br />
	<div id="vpContainer"></div>
	<br />
</body>
</html>
